<template>
  <div class="receipt-order-edit-wrapper">
    <div v-if="value.outType === 'SKU'">
      <div class="table">
        <WmsTable :data="value.details">
          <el-table-column
            :label="$t('common.MaterialName')"
            align="center"
            prop="prod.itemName"
          ></el-table-column>
          <el-table-column
            :label="$t('common.MaterialNo')"
            align="center"
            prop="prod.itemNo"
          ></el-table-column>
          <el-table-column
            :label="$t('common.MaterialType')"
            align="center"
            prop="prod.itemType"
          ></el-table-column>
          <el-table-column
            :label="$t('common.inventory')"
            align="center"
            prop="prod.stock"
          ></el-table-column>
          <el-table-column
            :label="$t('common.planNumber')"
            align="center"
            prop="planQuantity"
            width="150"
          >
          </el-table-column>
          <el-table-column :label="$t('common.Warehouse/storage area')" align="center" width="200">
            <template slot-scope="scope">
              {{ scope.row.prod.warehouseName }}/{{ scope.row.prod.areaName }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('fiance.amount')" align="center" width="150">
          </el-table-column>
        </WmsTable>
      </div>
    </div>
    <div v-if="value.outType === 'BOX'">
      <div class="table">
        <!-- <BoxListComponent
          ref="boxList"
          :value="wmsShipmentOrderDetailList"
          :styleBox="'height: calc(100vh - 210px);overflow: auto;'"
        /> -->
        <BoxListComponent
          ref="boxList"
          :url="'/wms/shipmentOrderDetail/list'"
          :methodType="'post'"
          :return-data="returnBoxData"
          :params="{ ...queryParams, 
            shipmentOrderId: this.value.id,status: '' }"
          :pageReq="pageReq"
          :bigBoxSvg="'max-width: 170%;'"
          :isBoxList="true"
          :styleBox="'height: calc(100vh - 210px);overflow: auto;'"
        />
      </div>
    </div>
  </div>
</template>

<script>
// import BoxListComponent from "@/views/components/wms/BoxList/index.vue";
import BoxListComponent from "@/views/wms/boxList/BoxList/index.vue";
export default {
  props: ["value"],
  components: {
    BoxListComponent,
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      pageReq: {
        page: 1,
        size: 10,
      },
    };
  },
  methods: {
    returnBoxData(data) {
      if (data.content) {
        return data.content;
      }
    },
    getList() {
      if (this.value.outType === "BOX") {
        this.$nextTick(() => {
          this.$refs.boxList.getList();
        });
      }
    },
  },
};
</script>
